<section class="content-header">
  <h1>Users Roles<small>Module description here</small></h1>
  <ol class="breadcrumb">
    <li><a ui-sref="app.landing"><i class="fa fa-dashboard"></i> Home</a></li>
    <li><a ui-sref="app.userroles">Role Lists</a></li>
    <li class="active">Edit User Role</li>
  </ol>
</section>
<section class="content">
  <div class="row">
    <div class="col-sm-12 col-md-7">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">Edit User Role</h3>
        </div>
        <form class="form-horizontal" name="roleForm" ng-submit="vm.save(roleForm.$valid)" novalidate>
          <div class="box-body">
            <div ng-if="vm.alerts" class="alert alert-{{alert.type}}" ng-repeat="alert in vm.alerts">
              <h4>{{alert.title}}</h4>
              <p>{{alert.msg}}</p>
            </div>
            <div class="form-group" ng-class="{ 'has-error': roleForm.role.$invalid && ( vm.formSubmitted || roleForm.role.$touched) }">
              <label for="inputEmail3" class="col-sm-2 control-label">Role</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" ng-model="vm.role.data.name" name="role" placeholder="Role" required>
                <p ng-show="roleForm.role.$error.required && ( vm.formSubmitted || roleForm.role.$touched)" class="help-block">Role is required.</p>
              </div>
            </div>
            <div class="form-group" ng-class="{ 'has-error': roleForm.slug.$invalid && ( vm.formSubmitted || roleForm.slug.$touched) }">
              <label for="inputPassword3" class="col-sm-2 control-label">Slug</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" ng-model="vm.role.data.slug" name="slug" placeholder="Slug" required>
                <p ng-show="roleForm.slug.$error.required && ( vm.formSubmitted || roleForm.slug.$touched)" class="help-block">Slug is required.</p>
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label">Description</label>
              <div class="col-sm-10">
                <textarea class="form-control" rows="3" ng-model="vm.role.data.description" name="description" placeholder="Description"></textarea>
              </div>
            </div>
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">Permission</label>
              <div class="col-sm-10">
                <div class="checkbox" ng-repeat="permission in vm.systemPermissions">
                  <label>
                    <input type="checkbox" checklist-model="vm.role.data.permissions" checklist-value="permission.id"> {{permission.name}}
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="box-footer">
            <a ui-sref="app.userroles" class="btn btn-default"><i class="fa fa-angle-double-left"></i> Back</a>
            <button type="submit" class="btn btn-primary pull-right">Update</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>
